<template>
  <div class="code_page">
    <CommonHeader title="获取验证码" />
    <!-- 发送验证页主体 -->
    <div class="code_content page_no_tab_bar">
      <!-- 标题 -->
      <div class="code_title">请输入验证码</div>
      <!-- 邮箱 -->
      <div class="font_color">验证码发送至：{{ curEmail }}</div>
      <!-- 验证码 -->
      <div class="input_box">
        <div class="input">
          <input type="text" placeholder="验证码" v-model="ruleForm.code" />
          <div class="input_rule">{{ rules.code.rule }}</div>
        </div>
      </div>
      <!-- 倒计时 -->
      <div class="re_send font_color" @click="getCode">
        重新发送 <span class="add_text" v-if="curTime">({{ curTime }}s)</span>
      </div>
      <!-- 设置密码按钮 -->
      <div class="operate_btn" @click="goPage">
        <span>下一步</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import CommonHeader from "@/components/CommonHeader.vue";
import { useRouter } from "vue-router";
import { sendEmail } from "@/api/user";
import { ElMessage } from "element-plus";

// 获取路由对象
const router = useRouter();
// 当前剩余时间
const curTime = ref(0);
const isFlag = ref(true);
// 当前验证码
const curCode = ref("");
const curEmail = ref("")
// 表单数据
const ruleForm: any = ref({
  code: "",
});
const data: any = ref()
// 表单验证
const rules: any = reactive({
  code: {
    msg: "请输入验证码",
    rule: "",
  },
});

// 跳转注册页
const goPage = () => {
  if (validateForm()) {
    if (ruleForm.value.code != curCode.value)
      return ElMessage.error("验证码有误！");
    data.value = {
      ...data.value,
      code: curCode.value
    }
    sessionStorage.setItem("data", JSON.stringify(data.value))
    router.push("/setPassword");
  }
};

// 获取验证码
const getCode = () => {
  if (curTime.value) return;
  if (!isFlag.value) return ElMessage.error("请勿频繁请求！");
  isFlag.value = false;
  // 请求邮箱验证码
  sendEmail({ email: data.value.email, useTo: "2" }).then((res: any) => {
    downCount();
    curCode.value = res.msg;
    ElMessage.success("获取验证码成功，请注意您的邮箱！");
  });
};

// 验证码倒计时
const downCount = () => {
  let num = 60;
  curTime.value = num;
  let timer = setInterval(() => {
    if (num < 1) {
      clearInterval(timer);
      isFlag.value = true;
    } else {
      num--;
      curTime.value = num;
    }
  }, 1000);
};

// 表单验证
const validateForm = () => {
  for (let k in rules) {
    // 验证是否为空
    if (ruleForm.value[k].trim() == "") {
      rules[k].rule = rules[k].msg;
      return false;
    }
  }
  for (let k in rules) {
    rules[k].rule = "";
  }
  return true;
};

// 初始化数据
onMounted(() => {
  let sessionData = JSON.parse(sessionStorage.getItem("data") || "");
  data.value = sessionData
  curCode.value = sessionData.code;
  curEmail.value = sessionData.email
  downCount();
});
</script>

<style lang="scss" scoped>
.code_page {
  .code_content {
    padding-top: 10px;
    .code_title {
      font-size: 22px;
      margin-bottom: 10px;
    }
    .input_box {
      // height: 108px;
      margin-bottom: 10px;
      margin-top: 50px;
      .input {
        width: 100%;
        height: 50px;
        background-color: #141515;
        margin: 5px 0;
        input {
          width: 100%;
          height: 100%;
          font-size: 18px;
          padding: 0 5px;
          background-color: #141515;
          color: #ffffff;
        }
      }
      .input_psw {
        display: flex;
        align-items: center;
        input {
          flex: 1;
        }
        .is_open {
          display: flex;
          align-items: center;
          padding: 0px 10px;
        }
      }
      .input_rule {
        color: #e63737;
        font-size: 14px;
      }
    }
    .re_send {
      text-align: right;
    }
    .operate_btn {
      margin-top: 20px;
      background: linear-gradient(to right, #14da62, #0d5eae);
      text-align: center;
      padding: 10px;
      border-radius: 10px;
    }
  }
}
</style>
